<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>三级联动</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
    <select id="sheng"></select>
    <select id="shi"></select>
    <select id="xian"></select>

    <script>
        $(function(){
            var jsonData;
            $.ajax({
                url:'chengshi.json',
                success:function(data){
                    console.log(JSON.parse(data))
                    jsonData = JSON.parse(data);
                    //首次打开网页显示 显示市
                    showShi(jsonData[0],0)
                    $.each(jsonData,function(index,obj){
                        $('#sheng').append($('<option value="'+index+'">'+ obj.shengming +'</option>'))
                        //笨方法1
                        // if(index == 0){
                        //     $.each(obj.shi,function(index2,obj2){
                        //         $('#shi').append($('<option value="'+index2+'">'+ obj2.shiming +'</option>'))
                        //         if(index2 == 0){
                        //             $.each(obj2.xian,function(index3,obj3){
                        //                 $('#xian').append($('<option value="'+index3+'">'+ obj3.xianming +'</option>'))
                        //             })
                        //         }
                        //     })
                        // }
                    })
                    //笨方法2
                    // $.each(jsondata[0].shi,function(index2,obj2){
                    //     $('#shi').append($('<option value="'+index2+'">'+ obj2.shiming +'</option>'))
                    // })
                    // $.each(jsondata[0].shi[0].xian,function(index3,obj3){
                    //     $('#xian').append($('<option value="'+index3+'">'+ obj3.xianming +'</option>'))
                    // })
                }
            })
            // 笨 方法3
            //封装 功能渲染市的功能
            function showShi(data,num){
                console.log(data)
                //清空原来的
                $("#shi").empty();
                $.each(data.shi,function(index,objData){
                    $('#shi').append($('<option value="'+index+'">'+ objData.shiming +'</option>'))
                })
                showXian(data.shi[num].xian)
            }
            //封装 显示县
            function showXian(data){
                console.log(data)
                $("#xian").empty();
                $.each(data,function(index,objData){
                    $('#xian').append($('<option value="'+index+'">'+ objData.xianming +'</option>'))
                })
            }
            //改变省
            $('#sheng').change(function(e){
                console.log(jsonData)
                //获取值
                var OPvalueSheng = $('#sheng').val()
                console.log(jsonData[OPvalueSheng])
                //调用函数更新市
                showShi(jsonData[OPvalueSheng],0)
            })
            //改变市
            $("#shi").change(function(e){
                var OPvalueSheng = $('#sheng').val()
                var OPvalueShi = $('#shi').val()
                // console.log(OPvalueSheng)
                // console.log(OPvalueShi)
                // console.log(jsonData)
                showXian(jsonData[OPvalueSheng].shi[OPvalueShi].xian)
            })
        })
    </script>
</body>
</html>